<template>
  <div class="dec box">
    <p>{{imginfo.title}}</p>
    <div class="des">
      <div class="pubtime">发表时间：{{imginfo.add_time | dataformate()}}</div>
      <div class="clcnum">点击：{{imginfo.click}}</div>
    </div>
    <hr />
    <!-- 展示图片 -->
    <ul class="xqt">
      <li v-for="(img,index) in imgslt" :key="index">
        <img :src="img.src" alt @click="getImg(img,index)" />
      </li>
    </ul>
    <!-- 图片描述 -->
    <div>{{imginfo.content}}</div>

    <!-- 发布评论 -->
    <h4>发表评论</h4>
    <hr />
    <!-- 输入留言 -->
    <textarea name="comm" id="comm" cols="30" rows="10" v-model="content" class="commstyle">111</textarea>
    <van-button type="info" @click="addcomment">提交评论</van-button>
    <!-- 评论列表 -->
    <div v-for="(item,index) in commlist" :key="index">
      <div class="bq">第{{index-0+1}}楼 用户：{{item.user_name}} 发表时间：{{item.add_time | dataformate()}}</div>
      <div class="con">{{item.content}}</div>
    </div>
  </div>
</template>

<script>
import { ImagePreview } from "vant";

export default {
  data() {
    return {
      imginfo: {},
      imgslt: [],
      previewimg: [],
      commlist: [],
      content: ""
    };
  },
  created() {
    this.getimginfo();
    this.getcommentlist();
  },
  methods: {
    // 获取图片详情信息
    async getimginfo() {
      // 获取路由中的id
      var id = this.$route.params.id;
      console.log(id);
      // 请求图片详情
      const { data: res } = await this.$axios.get(`/api/getimageInfo/${id}`);
      this.imginfo = res.message[0];
      // 请求图片详情缩略图
      const { data: rr } = await this.$axios.get(`/api/getthumimages/${id}`);
      this.imgslt = rr.message;
      this.imgslt.forEach(item => {
        this.previewimg.push(item.src);
      });
    },

    // 点击预览图片
    getImg(images, index) {
      ImagePreview({
        images: this.previewimg,
        showIndex: true,
        loop: false,
        startPosition: index
      });
    },

    // 获取评论列表数据
    async getcommentlist() {
      const { data: res } = await this.$axios.get(
        `/api/getcomments/${this.$route.params.id}?pageindex=1`
      );
      console.log(res);
      this.commlist = res.message;
    },
    // 提交评论
    async addcomment() {
      //  console.log(this.content);
      // console.log("1");
      const {
        data: res
      } = await this.$axios.post(`/api/postcomment/${this.$route.params.id}`, {
        content: this.content
      });
      console.log(res);
      this.getcommentlist();
      this.content=''
    }
  }
};
</script>

<style scope="less">

.pubtime {
  float: left;
  /* margin-left: 5px; */
  font-size: 12px;
  color: rgb(141, 141, 141);
}
.clcnum {
  float: right;
  font-size: 12px;
  /* margin-right: 5px; */
  color: rgb(141, 141, 141);
}
.des {
  overflow: hidden;

}
hr {
  width: 100%;
  margin: 16px 0;
  color: rgb(141, 141, 141);
}
.xqt {
  width: 100%;
  text-align: center;
  /* overflow: hidden; */
}
.xqt li {
  display: inline-block;
  /* float: left; */
  width: 26%;
  margin: 10px;
  box-shadow: 0 5px 5px #d1d1d1;
}
.xqt li img {
  width: 100%;
  vertical-align: middle;
}

.dec {
  margin-top: 60px;
  margin-left: 5px;
  margin-right: 5px;
  margin-top:40px; 
}
 .dec p {
  text-align: center;
  color: #26a2ff !important;
  font-size: 16px;
  font-weight: 700;
  margin: 16px 0;
}
h4 {
  margin-top: 20px;
}
.commstyle {
  width: 100%;
  height: 100px;
  border: 1px solid rgb(218, 216, 216);
}
.van-button {
  width: 100%;
}
.bq {
  background-color: rgb(180, 179, 179);
  height: 20px;
  color: #fff;
  font-size: 14px;
  margin: 5px 0;
}
</style>